<template>
  <view v-show="payIndex === 1">
    <div class="search-box">
      <icon class="search-icon" type="search" size="14" color="#b2b2b2"/>
      <input
        class="search-input"
        confirm-type="search"
        placeholder="搜索客户名称/负责人"
        placeholder-style="color: #9EA1BB;letter-spacing:2rpx;"
        @input="inputEnter"
      />
    </div>
    <div class="transverse-line row">
      <div class="in-number">共有{{ InsuranceDetailCount }}条记录</div>
      <div class="transverse-right align-flex">
        <view class="title-fatalism align-flex">
          <poput-time display="true" :list='operateData' :default="operateIndex" @cancel="bindPickerChangeOperate"/>
        </view>
        <div class="spectacle align-flex">
          <view class="fatalism align-flex">
            <picker @change="bindPickerChange" :range="saleData">
              <view class="uni-input">{{ saleData[salePlan] || '暂无' }}</view>
            </picker>
            <image
              class="fatalism-dropdown"
              src="/static/achievement-reports-form/dropdown.png"
            />
          </view>
        </div>
        <div class="compositor align-flex">
          <view class="fatalism align-flex fatalism-margin">
            <picker @change="bindPickerChangeMethod" :value="sortIndexMethod" :range="LongPlanInfoName">
              <view class="uni-input">排序</view>
            </picker>
            <image
              class="fatalism-dropdown"
              src="/static/achievement-reports-form/dropdown.png"
            />
          </view>
        </div>
      </div>
    </div>
    <div class="substance" v-for="(item,index) in InsuranceDetailData" :key="index" @click="goCompany(item.companyId,item.dealId)">
      <div class="rubric">{{item.companyName}}</div>
      <div class="circumstance align-flex">
        <div class="circumstance-left">
          <div class="exercise-problems">
            商务负责人：
            <text class="explicit">{{item.saleName || '暂无'}}</text>
          </div>
          <div class="exercise-problems">
            销售场景：
            <text class="explicit"> {{item.salesScenario || '暂无'}}</text>
          </div>
          <div class="exercise-problems">
            开户金额：
            <text class="explicit"> ¥{{item.accountOpenAmount}}</text>
          </div>
          <div class="exercise-problems">
            服务金额：
            <text class="explicit"> ¥{{item.serviceAmount || '暂无'}}</text>
          </div>
        </div>
        <div class="circumstance-right">
          <div class="exercise-problems">
            付款方式：
            <text class="explicit"> {{item.paymentMethod || '暂无'}}</text>
          </div>
          <div class="exercise-problems">
            付款时间：
            <text class="explicit"> {{item.paymentTime || '暂无'}}</text>
          </div>
          <div class="exercise-problems">
            到期时间：
            <text class="explicit"> {{item.dueDate || '暂无'}}</text>
          </div>
          <div class="exercise-problems">
            开通时间：
            <text class="explicit"> {{item.productOpenTime || '暂无'}}</text>
          </div>
        </div>
      </div>
    </div>

    <!-- 选择昨天、今天、本周、本月数据弹窗 -->
    <div class="choices-hour" v-if="isPopup == true">
      <uni-popup
        ref="popup"
        :type="type"
        background-color="#fff"
        class="pop-up"
      >
        <div :class="['choices', show == true ? 'choices-picker' : '']">
          <div class="select-while">选择时间</div>
          <div
            class="sequence-time"
            v-for="(item, index) in time"
            :key="index"
            @click="change(item.id)"
          >
            <div
              :class="[
                            'specific-hour',
                            cut == item.id ? 'specific-blue' : ''
                        ]"
            >
              {{ item.name }}
            </div>
            <div class="hook" v-if="cut == item.id">✔</div>
          </div>
          <!-- 自定义选择时间部分 -->
          <uni-datetime-picker
            :show="show"
            v-model="rangeTime"
            value="2022-3-20"
            @change="onRangeTime"
            type="daterange"
          >
            <div class="sequence-time" @click="custom">
              <div class="specific-hour">自定义</div>
              <image
                class="custom-img"
                src="/static/score/more.png"
              ></image>
            </div>
          </uni-datetime-picker>
        </div>
      </uni-popup>
    </div>
    <div>
    </div>
    <no-Data v-if="InsuranceDetailCount==''"></no-Data>
  </view>
</template>
<script lang="ts" setup>
import { ref, onMounted, defineProps, toRefs, nextTick } from 'vue'
import poputTime from '@/components/popup-custom-time/popup-custom-time.vue'
import noData from '@/components/no-data/no-data.vue'
import { getVenditionInsuranceDetail } from '@/api/quick'
import dayjs from 'dayjs'
import { onLoad } from '@dcloudio/uni-app'
import user from '@/utils/user'
import { shake } from '@/utils/util'
// eslint-disable-next-line no-redeclare
const cccc = dayjs().format('YYYY-MM', new Date())
console.log(cccc, 'cccc')

const pageNum = ref(1)

const props = defineProps({
    // 子组件接收父组件传递过来的值
    payIndex: Number
})
// 使用父组件传递过来的值
const { payIndex } = toRefs(props)

console.log(payIndex.value, '打印一下这个是啥')

onLoad(async () => {
    await user.waitLogin()
    const nowyear = new Date().getFullYear()
    const nowmonth = new Date().getMonth() + 1
    startTime.value = formatDate(new Date(nowyear, nowmonth - 1, 1))
    endTime.value = formatDate(new Date(nowyear, nowmonth, 0))
    venditionInsuranceDetail()
    uni.$on('onReachBottom', function (data) {
        console.log('onReachBottom')
        getmore()
    })
})
const formatDate = (date: any) => {
    const myyear = date.getFullYear()
    let mymonth = date.getMonth() + 1
    let myweekday = date.getDate()
    if (mymonth < 10) {
        mymonth = "0" + mymonth
    }
    if (myweekday < 10) {
        myweekday = "0" + myweekday
    }
    return (myyear + "-" + mymonth + "-" + myweekday)
}
// 到达底部
const hasNextPage = ref(true)
const getmore = () => {
    if (!hasNextPage.value) {
        return
    }
    pageNum.value += 1
    venditionInsuranceDetail()
}
const startTime = ref('')
const endTime = ref('')
// 调用销售明细接口
// 接口数据
const InsuranceDetailData = ref()
const InsuranceDetailCount = ref(0)
const venditionInsuranceDetail = async () => {
    if (pageNum.value === 1) {
        InsuranceDetailData.value = []
        pageNum.value = 1
        hasNextPage.value = true
    }
    console.log(salePlan.value - 1, '这个值是多少')
    const result = await getVenditionInsuranceDetail({
        salesScenario: salePlan.value === 0 ? '' : salePlan.value - 1,
        startTime: operateIndex.value !== 1000 ? startTime.value : itemRangeThree.value || '',
        endTime: operateIndex.value !== 1000 ? endTime.value : itemRangeFour.value || '',
        sortOrder: sortIndexMethod.value,
        searchText: inputValue.value,
        pageNum: pageNum.value,
        pageSize: 20
    })
    console.log(result, '销售明细')
    // InsuranceDetailData.value = result.list
    InsuranceDetailCount.value = result.totalCount

    console.log(result, '电子签充值明细')
    // chargeDetailData.value = result
    if (!result.hasNextPage) {
        hasNextPage.value = false
    }
    console.log(hasNextPage.value, '小起小起')
    const arr = []
    arr.push(...InsuranceDetailData.value)
    arr.push(...result.list)
    InsuranceDetailData.value = arr
    console.log(InsuranceDetailData.value, 'longInsuranceData')
}

// 时间范围
const rangeTime = ref([
    new Date(new Date().getTime() - 86400000).toLocaleDateString(),
    new Date().toLocaleDateString()
])
// 销售明细  昨天、明天、本周、本月、自定义
const itemRange = ref('' as string | undefined)
const operateIndex = ref(3)
const operateData = ref(['昨天', '今天', '本周', '本月', '上月'])
const itemRangeThree = ref()
const itemRangeFour = ref()
const bindPickerChangeOperate = async (
    index: number,
    time: undefined | string
) => {
    console.log(index, 'operateData')
    //   console.log(e.detail, 'e.detail')
    operateIndex.value = index.index
    console.log(operateIndex.value, 'operateIndex.valueoperateIndex.valueoperateIndex.value')
    itemRange.value = index.time
    if (index.index === 1000) {
        itemRangeThree.value = itemRange.value.substring(0, 10)
        itemRangeFour.value = itemRange.value.substring(13, 23)
    } else {
        startTime.value = index.startTime
        endTime.value = index.endTime
    }
    pageNum.value = 1
    await venditionInsuranceDetail()
}

// 全部场景 变量
const salePlan = ref(0)
const saleData = ref(['全部场景', '首签', '续签'] as string[])

// 改变全部场景选项事件
const bindPickerChange = (e: any) => {
    salePlan.value = e.detail.value
    console.log('picker发送选择改变，携带值为', e.detail.value)
    pageNum.value = 1
    venditionInsuranceDetail()
}

/* 排序 弹窗 */
const sortIndexMethod = ref(0)
const LongPlanInfoName = ref(['按付款时间倒序', '按付款时间正序', '按开通时间倒序', '按开通时间正序', '按到期时间倒序', '按到期时间正序'] as string[])
const bindPickerChangeMethod = async function (e: any) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    sortIndexMethod.value = e.detail.value
    pageNum.value = 1
    await venditionInsuranceDetail()
}

// input框输入事件
const inputValue = ref('')
const inputEnter = (e:any) => {
    shake(() => {
        console.log(e.detail.value, 'eeeeeany')
        inputValue.value = e.detail.value
        pageNum.value = 1
        venditionInsuranceDetail()
    }, 300)
}

const goCompany = (companyId:number, dealId:number) => {
  // eslint-disable-next-line no-empty
    if (!dealId) {
    } else {
      console.log(companyId, '公司id', dealId, 'dealId')
      const company = companyId
      const deal = dealId
      uni.navigateTo({
        url: '/packageRemind/pages/pay-detail/index?id=' + company + '&dealId=' + deal
      })
    }
}
</script>
<style lang="scss" scoped>
.transverse-line {
  box-sizing: border-box;
  padding: 0 30rpx;
  color: #565868;
  font-size: $font-normal;

  .previously,
  .spectacle,
  .compositor {
    box-sizing: border-box;
    padding-left: 30rpx;
    font-weight: 400;
  }

  .in-number {
    font-weight: 400;
    color: $grey;
  }
}

/* payIndex==1 部分 */
.search-box {
  margin: 30rpx;
}

.substance {
  box-sizing: border-box;
  padding: 30rpx;
  background: #fff;
  margin: 30rpx;

  .rubric {
    font-size: $font-medium;
    font-weight: 600;
    color: $black;
    padding-bottom: 30rpx;
    border-bottom: 1rpx solid #f4f4f7;
  }

  .exercise-problems {
    padding-top: 24rpx;
    font-size: $font-normal;
    font-weight: 400;
    color: $grey;

    .explicit {
      color: $black;
    }
  }

  .circumstance-right {
    padding-left: 58rpx;
  }
}

.transverse-down {
  width: 24rpx;
  height: 24rpx;
  margin-left: 8rpx;
}

.second-popup {
  width: 750rpx;
  height: 388rpx;
  background: #ffffff;
  box-sizing: border-box;
  padding: 60rpx 60rpx 27rpx 60rpx;

  .select-spectacle {
    font-size: $font-medium;
    font-weight: bold;
    color: $black;
  }

  .status-box {
    color: #565868;
    padding-top: 50rpx;
    display: flex;
    justify-content: space-between;

    .hook {
      width: 20rpx;
      height: 13rpx;
      color: $blue;
    }
  }

  .status-box-blue {
    color: $blue;
  }
}

.choices-hour {
  border-radius: 16rpx;
}

.pop-up {
  border-radius: 16rpx;

  .choices {
    width: 750rpx;
    height: 564rpx;
    background: #ffffff;
    opacity: 1;
    box-sizing: border-box;
    padding: 30rpx;
    border-radius: 16rpx;

    .custom-img {
      width: 36rpx;
      height: 36rpx;
    }

    .select-while {
      font-size: $font-medium;
      font-weight: bold;
      color: $black;
      padding: 30rpx;
    }
  }

  .choices-picker {
    height: 800rpx;
  }

  .sequence-time {
    padding: 20rpx 30rpx 27rpx 29rpx;
    display: flex;
    justify-content: space-between;

    .specific-blue {
      color: $blue;
    }

    .hook {
      width: 20rpx;
      height: 13rpx;
      color: $blue;
    }
  }
}

.third-popup {
  height: 564rpx;
}

.fatalism {
  background: none;
  border: 0px solid black;
  padding: 0;
}

.uni-input{
  max-width: 120rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
